<template>
  <div class="container">
    <baleTable
      :tableData="tableData"
      :tableHead="tableHead"
      :isSearch="true"
      :isPage="false"
      :tableLoading="tableLoading"
      :page="page"
      @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @searchMethods="searchMethods"
      @tableSortChange="tableSortChange"
      @handleRowClick="handleRowClick"
      ref="baleTable"
    >
       <template #tableOperation="{ scope }">
        <el-button type="primary" size="small" @click="showDialog(scope.row)">查看明细</el-button>
      </template>
    </baleTable>
  <detail ref="detail" ></detail>
  </div>
</template>

<script>
import {
  ApidataStatisticsDepartment
} from "@a/index";
import { tableHead } from "./config";
import detail from "./component/detail.vue"
export default {
  components:{
    detail
  },
  data() {
    return {
      tableHead,
      tableData: [],
      tableLoading: false,
      searchParams: {},
      sortParams: {},
      page: {}
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData(params = {}) {
      let postParams = {
        ...params,
        ...this.searchParams,
        ...this.sortParams,
      };
      this.tableLoading = true;
      ApidataStatisticsDepartment(postParams).then((res) => {
        let { data } = res;
        this.tableData = data;

        this.tableLoading = false;
      });
    },
    searchMethods(params) {
      this.searchParams = {};
      this.searchParams = params;
      this.getTableData();
    },
    pageSizeChange(val) {
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.getTableData();
    },
    tableSortChange(params) {
      if (params.sort_str) {
        this.sortParams = { ...this.sortParams, ...params };
      } else {
        delete this.sortParams.sort_str;
        delete this.sortParams.sort_order;
      }
      this.getTableData();
    },
    handleRowClick(params) {},
    showDialog(row){
      this.$refs.detail.show(row, this.searchParams)
    }
    
  },
};
</script>

<style lang="less" scoped></style>
